﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>多行文字实现垂直居中 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        body { background:#EFEFEF }
        .mydiv { width: 300px; height: 200px; position: absolute; left: 50%; top: 50%; margin: -100px 0 0 -150px; background-color: #FFFFFF; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 1px; border-top-right-radius: 1px; box-shadow: 0 2px 10px #9E9F9F; }
    </style>
</head>
<body>
    <div class="mydiv">
        <div style="line-height:200px; text-align:center"> 现在我们要使这段文字垂直居中显示！</div>
    </div>
</body>
</html>
